<template>
	<view class="release" :style="{'--color':vuex_config.themeColor1}">
		<view class="title">
			<u-field label-width='80' v-model="dataForm.name" label="姓名" disabled>
				<u-input slot='right' v-model="dataForm.name" type="text"  input-align="right" placeholder="输入姓名" :border="false"  />
			</u-field>
			<u-field label-width='100' v-model="dataForm.title" type="text" disabled label="班级" >
				<u-input slot='right' v-model="dataForm.title" type="text"  input-align="right" placeholder="输入班级" :border="false"  />
			</u-field>
			<u-field label-width='100' v-model="dataForm.phone" label="电话" disabled>
				<u-input slot='right' v-model="dataForm.phone" type="number"  placeholder="输入电话" input-align="right" :border="false"  />
			</u-field>
			<view class="content-title" style="margin: 20rpx; ">作品</view>
			<view class="logo-box">
				<view class="img-box" v-for="(item,index) in imgList" :key='index'>
					<image class="img" :src="item" mode="" @click="openimg(index)"></image>
					<image class="del" src="../../static/close.png" mode="" @click="del(index)"></image>
				</view>
				<view class="upload" @click="upload">
					<u-icon name="plus" size='30'></u-icon>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="">
				<jinEdit ref='Edit' placeholder="请输入内容" :html='content' @editOk="editOk"></jinEdit>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="onSubmit">{{isUser?'立即参加':'活动已结束'}}</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadImage,
	} from "@/utils/upload.js"
	import {
		uniToast,
		uniModal,
		uniBack,
		uniPreview
	} from '@/utils/uniPromise.js'
	import jinEdit from './jin-edit/jin-edit.vue';
	export default {
		props: {
			activityId: {
				type: [String, Number],
				default: ''
			},
			timeForm: {
				type: Object,
				default: ()=>{}
			}
		},
		data() {
			return {
				imgList: [],
				dataForm: {
					name: '',
					title: '',
					code: '',
					img: '',
					phone: '',
					status: 0,
					sort: 99,
					num: 0,
					details: ''
				},
				content: '',
				isUser:true
			}
		},
		components: {
			jinEdit
		},
		methods: {
			init(){
				if(this.timeForm.end_date < new Date().getTime()){
					this.isUser = false
				}
			},
			upload() {
				uploadImage().then(res => {
					this.imgList = this.imgList.concat(res)
				})
			},

			editOk(res) {
				this.dataForm.details = res.html
			},
			del(id) {
				uniModal({
					content: '是否删除该图片'
				}).then(res => {
					if (res == 'success') {
						this.imgList.splice(id, 1)
					}
				})
			},
			openimg(id) {
				uniPreview(id, this.imgList)
			},
			onSubmit() {
				if (!this.isUser) {
					return 
				}else if(!this.dataForm.name && !this.dataForm.title && !this.dataForm.phone){
					return uniToast('内容不能为空')
				}
				this.$refs.Edit.release(true)
				this.dataForm.img = (this.imgList || []).join(',')
				this.dataForm.fk_users_id = this.vuex_user.pk_id
				this.dataForm.fk_info_id = this.activityId
				this.dataForm.code = Math.floor(Math.random() * 10000) + 1000;
				this.$AddNewData('b_vote_info_player', this.dataForm).then(res => {
					uniToast('参与成功')
					this.dataForm = {
						name: '',
						title: '',
						code: '',
						img: '',
						phone: '',
						status: 0,
						sort: 99,
						num: 0,
						details: ''
					}
					this.content = ''
					this.imgList = []
					this.$refs.Edit.onEditorReady()
				}).catch(err => {
					uniToast('参与失败')
				})
			}
		},
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.release {
		padding: 20rpx 26rpx 0;

		.title {
			background-color: #fff;
			width: 100%;
			border-radius: 12rpx;
			padding: 8rpx 10rpx;

			.logo-box {
				display: flex;
				padding: 0 28rpx 10rpx;
				align-items: center;
				flex-wrap: wrap;
			}
		}

		.img {
			width: 12rpx;
			height: 24rpx;
		}

		.content {
			margin: 24rpx 0;
			width: 100%;
			background-color: #fff;
			border-radius: 12rpx;

			.content-title {
				font-size: 28rpx;
				color: #1E1E1E;
			}
		}

		.btn-box {
			width: 698rpx;
			margin: 20rpx 0;

			.btn {
				width: 100%;
				height: 90rpx;
				background-color: var(--color);
				color: #fff;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 90rpx;
				border-radius: 12rpx;
			}
		}

		.img-box {
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;
			margin-right: 26rpx;
			margin-bottom: 20rpx;

			.img {
				width: 100%;
				height: 100%;
			}

			.del {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				top: 10rpx;
				right: 10rpx;
			}
		}

		.upload-list {
			display: flex;
			flex-wrap: wrap;

		}

		.upload {
			background-color: #E8E8E8;
			width: 180rpx;
			height: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;

		}
	}
</style>
